"use client";
import { Table, Spin } from "antd";
import { error } from "console";
import { title } from "process";
import { useEffect, useState } from "react";

export default function Home() {
  const [ data, setDate ] = useState([])
  useEffect(() => {
    fetch('http://127.0.0.1:5000', {
      method: 'GET'
    }).then(response => {
      if (!response.ok) {
        throw new Error('Netork response was not ok');
      }
      return response.json();
    })
      .then(data => {
        // TODO
        setDate(data)
      })
      .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
      });
  }, [])

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '新增代码量',
      dataIndex: 'additions',
      key: 'additions',
    },
    {
      title: '删除代码量',
      dataIndex: 'deletions',
      key: 'deletions',
    },
    {
      title: '检视意见数',
      dataIndex: 'comment',
      key: 'comment',
    },
    {
      title: '被检视意见数',
      dataIndex: 'commented',
      key: 'commented',
    },
    {
      title: 'PR数量',
      dataIndex: 'pr_count',
      key: 'pr_count',
    },
  ]

  return (
    <div>
      {
        data.length ===0 ? (<div style={{ display: 'flex', width: '100vw', height: '100vh', alignItems: 'center', justifyContent: 'center'}}>
          <Spin>
          </Spin>
        </div>) : (<div>
          <div style={{ textAlign: "center", margin: "10px" }}>
            <span style={{ fontSize: '35px' }}>参天看板</span>
          </div>
          <div style={{ height: '100vh' }}>
            <Table dataSource={data} columns={columns} pagination={false}>
            </Table>
          </div>
        </div>)
      }
    </div>
  );
}